<template>
  <view class="silent-authorization">
    <view class="main">
      <image class="logo" src="/static/logo.png" />
      <button
        class="btn-primary btn-login"
        open-type="getPhoneNumber"
        @getphonenumber="handleSilentAuthorization"
      >
        手机号快捷登录
      </button>
      <view class="toggle-login" @click="toggleLoginWay">账号登录</view>
    </view>
    <view class="tourist-mode">
      <view class="title">使用其他方式</view>
      <view class="click-label" @click="toHome">
        <image class="other-icon" src="/static/login/tourist.png" />
        <view class="hint">游客模式</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { loginBySilent } from '@/api'
import { useUserStore } from '@/store/user'
import { useLocationStore } from '@/store/location'
import { startConnect } from '@/tcpSocket'

const userStore = useUserStore()
const locationStore = useLocationStore()

function handleSilentAuthorization(e) {
  if (e.detail.errMsg === 'getPhoneNumber:ok') {
    const { code } = e.detail
    console.log(e)
    const params = {
      code,
      latitude: locationStore.latitude,
      longitude: locationStore.longitude
    }
    loginBySilent(params).then(res => {
      userStore.login(res)
      startConnect()
    })
  }
}

function toggleLoginWay() {
  uni.navigateTo({
    url: '/pages/login/index'
  })
}

function toHome() {
  uni.switchTab({
    url: '/pages/home/index'
  })
}
</script>

<style scoped lang="scss">
.silent-authorization {
  height: 100vh;
  background-image: url('/static/login/bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  .main {
    padding: 360rpx 50rpx;
    .logo {
      width: 174rpx;
      height: 152rpx;
      display: block;
      margin: auto;
    }
    .btn-login {
      margin-top: 90rpx;
    }
    .toggle-login {
      color: #4771f6;
      font-weight: bold;
      text-align: center;
      padding-top: 50rpx;
    }
  }
  .tourist-mode {
    text-align: center;
    padding-bottom: 70rpx;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    .title {
      font-size: 26rpx;
      color: #b1b1b1;
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: 20rpx;
      &::before {
        content: '';
        display: block;
        background-color: #b1b1b1;
        width: 100rpx;
        height: 2rpx;
      }
      &::after {
        content: '';
        display: block;
        background-color: #b1b1b1;
        width: 100rpx;
        height: 2rpx;
      }
    }
    .click-label {
      padding-top: 30rpx;
      display: inline-block;
    }
    .other-icon {
      width: 70rpx;
      height: 70rpx;
    }
    .hint {
      font-size: 24rpx;
      color: #333;
    }
  }
}
</style>
